<template>
  <div class="login-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="login-title">登录中心</span>
      </div>
      <div class="login-form-part-div">
        <el-form :model="userForm" ref="loginForm">
          <el-form-item>
            <el-input type="text" v-model="userForm.username" auto-complete="off" placeholder="请输入账号">
              <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-input type="text" v-model="userForm.password" show-password auto-complete="off"
                      placeholder="请输入密码">
              <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button @click="handleLogin" class="submit-el-button" :loading="loading"
                   type="primary">登录
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import api from '@/utils/api'
import axios from "axios";
import {detail} from "@/api/userApi";

export default {
  data() {
    return {
      loading: false,
      // 登录信息
      userForm: {
        username: '',
        password: ''
      },
    }
  },
  mounted() {

  },
  methods: {

    handleLogin() {
      const ids = [1, 2, 3, 4, 5];
      axios({
        method: "post",
        url: 'http://192.168.2.17:8080/sshapp_accountsManage_war/vue/recruitManage/recruitment_plan/commit_recruit',
        headers: {
          'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkZXBhcnRObyI6IjM3IiwibG9naW5OYW1lIjoiWU0wMDE2IiwidXNlck5vIjoiNzA5IiwidXNlck5hbWUiOiLoooHmnpoiLCJleHAiOjE3MTc5MTMwMDMsInVzZXJJZCI6MTkzMjUyOTg2ODgwMCwiaWF0IjoxNzE3NjUzODAzfQ.GubdsfLwgrsNH5bLSYbolvw4TaqhdmfXX5gDKmlqusU',
          'Uid': '1932529868800'
        },//请求头参数
        data: {
          ids: ids
        }
      }).then((res) => {
        console.log(res);
      })

      if (this.userForm.username === '') {
        this.alertError('账号不得为空')
        return;
      }
      if (this.userForm.password === '') {
        this.alertError('密码不得为空')
        return;
      }
      console.log(this.userForm)
      api.doLogin(this.userForm).then(result => {
        if (result.code === 200) {
          let username = result.data.username
          let token = result.data.token
          localStorage.setItem('username', JSON.stringify(username));
          localStorage.setItem('token', JSON.stringify(token));

          this.$router.push({path: '/'});
        } else {
          this.alertError(result.msg);
        }
      });

    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
  }
}
</script>

<style scoped>
.submit-el-button {
  margin: 20px auto;
  width: 100%;
}

.login-page {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title {
  font-size: 20px;
}

.clearfix {
  text-align: center;
}

.login-page .box-card {
  width: 500px;
  height: 400px;
}

.login-form-part-div {
  width: 430px;
  height: 240px;
  margin: 20px auto;
}

.login-form-part-div .el-form-item {
  margin-bottom: 40px;
}

.el-form {
  height: 200px;
}

a {
  text-decoration: none;
}

.login-page {
  background-color: #d3e3fd;
}
</style>